<template>
  <div class="carinfo-page">
    <common-header :headTitle='headTitle'>
    </common-header>
    <div class="content">
      <div class="amap-page-container" style="height: 100%">
        <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" zoomEnable="true" style="height: 100%">
          <el-amap-polyline :strokeColor="strokeColor" zIndex='100' lineJoin='round'
                            v-for="(item, index) in polyline"
                            :key="index"
                            strokeWeight='8'
                            :path="item.path"
          >
          </el-amap-polyline>
          <!--<el-amap-marker vid="component-marker" v-for="(item,index) in textArr"-->
          <!--:position="item.position"-->
          <!--:offset="item.offset"-->
          <!--:events="item.events"-->
          <!--:content="item.content">-->
          <!--</el-amap-marker>-->
          <!--<el-amap-marker-->
            <!--v-for="(item, index) in points" :key="index"-->
            <!--:events="item.events"-->
            <!--:icon="item.icon"-->
            <!--:position="item.position">-->
          <!--</el-amap-marker>-->
          <el-amap-marker @click="markerClickEvent(marker)"
                          v-for="(item, index) in markers" :key="index"
                          :events="item.events"
                          :icon="item.icon"
                          :position="item.position"
                          :vid="index"
                          :content="item.content">
          </el-amap-marker>
        </el-amap>
      </div>
    </div>
    <div class="info-box" v-if="isIbShow" :style="{position:ibPosition,top:ibpTop+'px',left:ibpLeft+'px'}">
      <div class="car-num"><span>1号车</span></div>
      <div class="info-item">
        <span>位置：xxxxxxxxxxxxx</span>
        <span>速度：xxx公里/小时</span>
        <span>油耗：67升</span>
        <span>工作时长：56小时</span>
      </div>
      <div class="img-b">
        <img src="../assets/images/cars/0.png" alt="">
      </div>
      <div class="btn-box">
        <span>实时对讲</span>
        <span>轨迹回放</span>
        <span>行车记录</span>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import CommonHeader from '@/components/header/CommonHeader'
  import $ from 'jquery'

  export default {
    data() {
      return {
        points: [],
        textArr: [],
        slotStyle: {
          padding: '2px 8px',
          background: '#eee',
          color: '#333',
          border: '1px solid #aaa'
        },
        isShow: false,
        textTemp: {
          pos: '[108.952368, 34.262803]',
          speed: 30,
          oil: 30,
          hours: 45
        },
        strokeColor: '#409EFF',
        headTitle: '',
        //地图参数
        zoom: 13,
        // center:'',
        markers: [],
        address: '',
        center: [108.952368, 34.262803],
        // center: [121.59996, 31.197646],
        currentCarInfo: {},
        myInterval: '',
        plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
          'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor',
          'AMap.CircleEditor', 'AMap.Geolocation', 'Geocoder'
        ],
        // positionX:null,
        // positionY:null,
        //info-box绑定样式
        ibPosition: 'absolute',
        ibpTop: 0,
        ibpLeft: 0,
        isIbShow: false,
        arr: [],
        carsMapLine: [1, 2, 3, 4], //所有车辆的轨迹数组，[{car1},{car2}]

        //
        polyline: [],
        texts: [],
        startAddress: '',
        endAddress: '',
        timePicked: '',
        today: '',
        mileage: 0,
        startMarker: {
          position: [221.59996, 61.197646],
          icon: require('../assets/images/cars/start.png'),
          events: {
            click: (e) => {
              this.$Message.info("起点")
            }
          }
        },
        endMarker: {
          position: [220.59996, 60.197646],
          icon: require('../assets/images/cars/end.png'),
          events: {
            click: (e) => {
              this.$Message.info("终点")
            }
          }
        },
        slotMarker: {
          position: [108.952368, 34.262803]
        },
        currentTemp: {},
      }
    },
    components: {
      CommonHeader
    },
    created() {
      var _this = this;
      this.getRouteData();
      this.myInterval = setInterval(() => {
        this.foo()
      }, 5000)
    },
    methods: {
      getStartPoint() {
        this.$http.post('http://192.168.3.244:9080/api/cars_actual', {}).then(res => {
          console.log('res::', res)
          for (let i in res.info) {
            console.log(res.info[i]);
            this.points.push(
              {
                position: [res.info[i].longitude, res.info[i].latitude],
                icon: require('../assets/images/cars/start.png'),
                events: {
                  click: (e) => {
                    console.log(e);
                  }
                }
              }
            )
          }
        })
      },
      markerClickEvent(marker) {
        alert(111)
      },
      getRouteData() {
        this.headTitle = localStorage.getItem('projectName');
        console.log(this.headTitle)
      },
      getClickedPoint(item) {
        var _this = this;
        // this.currentTemp = item // 获取当前点击事件对象信息;
        $('.amap-marker').on('click', (e) => {
          console.log(e)
          _this.ibpLeft = e.clientX + 15;
          _this.ibpTop = e.clientY;
        })
      },
      async foo() {
        var _this = this;
        const res1 = await this.getcars();
        const res2 = await this.getCarsLocation();
        console.log(res1, res2);

        if (this.polyline.length == 0) {
          let keysArr = Object.keys(res1.info);
          keysArr.forEach(v => {
            var path = [];
            this.polyline.push({path: path})
          })
        } else {
          _this.markers = [];
          var arr = [];
          let keysArr = Object.keys(res2);
          keysArr.forEach(v => {
            console.log('>>>>>>', res2[v])
            arr.push(res2[v])
          })
          console.log('>>>>>>', arr)
          for (let i = 0; i < arr.length; i++) {
            var position1 = [arr[i].longitude, arr[i].latitude];
            console.log('position1>>>>', position1);
            _this.polyline[i].path.push(position1);
            console.log('_this.polyline[' + i + '].path>>>', _this.polyline[i].path)
            _this.markers.push(
              {
                position: position1,
                icon: require('../assets/images/cars/44.png'),
                events: {
                  click: (e) => {
                    console.log(e);
                    _this.isIbShow = !_this.isIbShow
                    _this.getClickedPoint();
                  }
                }
              }
            )
            _this.textArr.push({
              position: position1,
              offset: [0, 0],
              content: `<div style="width: 320px;background: #ffffff;color: #333333;border: 1px solid #fefefe;border-radius: 4px;padding:10px 20px;"> <div>位置:${_this.textTemp.pos}</div><div>速度${_this.textTemp.speed}公里/小时</div><div>油耗：${_this.textTemp.oil}升</div><div>工作时长：${_this.textTemp.hours}小时</div></div>`,
              events: {
                //   click: () => {
                //     // alert('click text');
                //   }
              }
            })
          }

          console.log('arr最后一组数据：', arr[arr.length - 1])
          // console.log('_this.markers>>>', _this.markers);
          console.log('_this.textArr>>>', _this.textArr);
        }

      },
      getcars() {
        return new Promise((resolve, reject) => {
          this.$http.post('http://192.168.3.244:9080/api/cars_actual', {}).then(res => {
              resolve(res)
            },
            err => {
              reject(err)
            })
        })

      },
      //获取车辆信息
      getCarsLocation() {
        var _this = this;
        let data = {}
        return new Promise((resolve, reject) => {
          _this.$http.post('http://192.168.3.244:9080/api/cars_actual', data).then(
            res => {
              if (res.info) {
                resolve(res.info)
              }
            }
          )
        })
      }
    },
    destroyed() {
      clearInterval(this.myInterval)
    },
    mounted(){
      // this.getStartPoint();
    }
  }
</script>

<style scoped lang='scss'>
  .carinfo-page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .content {
      display: flex;
      width: 100%;
      flex: 1;
      justify-content: center;
      align-items: center;
      // padding: 20px 40px;
      background: #000;
      // overflow: hidden;
      overflow-y: scroll;

      .amap-page-container {
        width: 100%;
        height: 100%;
      }
    }

    .info-box {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      top: 300px;
      left: 300px;
      width: 320px;
      height: 400px;
      border-radius: 5px;
      background: rgba($color: #000, $alpha: .7);

      .car-num {
        width: 100%;
        // height: 10%;
        padding: 10px 20px;

        span {
          font-size: 16px;
          color: #fff;
        }
      }

      .info-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        flex: 1;
        padding: 10px 20px;

        span {
          font-size: 14px;
          color: #fff;
        }
      }

      .img-b {
        width: 100%;
        padding: 10px 20px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;

        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #fff;
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 20px 0;

        span {
          width: 32%;
          font-size: 14px;
          color: #000;
          line-height: 30px;
          background: #eee;
          text-align: center;

          a {
            color: inherit;
          }
        }
      }
    }
  }
</style>
<style>
  .amap-logo {
    display: none !important;
    background: #80cbc4;
  }

  .amap-copyright {
    bottom: -100px;
    display: none;
  }

  #currentLocation .ivu-modal-footer {
    padding: 0;
  }
</style>
